---
group: 'components'
category: 'state'
title: Tooltip
description: 'A simple text popup tip.'
order: 1
---

## When To Use

The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.

To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

## Basic Usage

```js live=true
() => (
  <Tooltip content="Tooltip content">
    <Button>Tooltip</Button>
  </Tooltip>
)
```

## Placement

```js live=true
() => (
  <>
    <Row style={{ width: '500px' }}>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top">
          <Button style={{ minWidth: '100px' }}>top</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-start">
          <Button style={{ minWidth: '100px' }}>top-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-end">
          <Button style={{ minWidth: '100px' }}>top-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right"
        >
          <Button style={{ minWidth: '100px' }}>right</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-start"
        >
          <Button style={{ minWidth: '100px' }}>right-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-end"
        >
          <Button style={{ minWidth: '100px' }}>right-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left"
        >
          <Button style={{ minWidth: '100px' }}>left</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-start"
        >
          <Button style={{ minWidth: '100px' }}>left-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-end"
        >
          <Button style={{ minWidth: '100px' }}>left-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom"
        >
          <Button style={{ minWidth: '100px' }}>bottom</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-start"
        >
          <Button style={{ minWidth: '100px' }}>bottom-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-end"
        >
          <Button style={{ minWidth: '100px' }}>bottom-end</Button>
        </Tooltip>
      </Col>
    </Row>
  </>
)
```

## Tooltip Toggle Mode

```js live=true
() => (
  <Group>
    <Tooltip content="Tooltip content" trigger="click">
      <Button>Click</Button>
    </Tooltip>
    <Tooltip content="Tooltip content">
       <Button>hover</Button>
    </Tooltip>
  </Group>
)
```

## Arrow

Arrow prop can be set to display a arrow.

```js live=true
() => (
  <Tooltip content="Tooltip content" arrow={false}>
    <Button>Arrow</Button>
  </Tooltip>
)
```

## Disabled Status

```js live=true
() => {
  return (
    <Tooltip content="Tooltip" disabled>
      <Button>Reference</Button>
    </Tooltip>
  )
}
```

## Delay

Delay in seconds, before tooltip is shown on mouse enter or hidden on mouse leave.

```js live=true
() => {
  return (
    <Tooltip content="tooltip" delay={1000}>
      <Button>Reference</Button>
    </Tooltip>
  )
}
```

## Control Mode

```js live=true
() => {
  const [visible, setVisible] = React.useState(true);
  const show = () => setVisible(true);
  const hide = () => setVisible(false);
  return (
    <Tooltip content="tooltip">
      <Button onClick={visible ? hide : show}>Reference</Button>
    </Tooltip>
  )
}
```

## Interactive Mode

Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.

```js live=true
() => {
  return (
    <Tooltip content="tooltip" interactive>
      <Button>interactive</Button>
    </Tooltip>
  )
}
```

